<template>
  <TopNav title="餐品一览"/>
  <div class="container">
    <!--餐食列表 start-->
    <div class="meal-list">
      <div class="meal-item" v-for="(item,index) in dataList.list" :key="index">
        <div @click="currentMeal=item.mealId" class="meal-item-meal">
          <div class="left">
            <img :src="item.mealImg">
          </div>
          <div class="right">
            <div class="title">{{ item.mealName }}</div>
            <div class="desc">{{ item.mealDesc }}</div>
          </div>
        </div>
        <el-card v-if="currentMeal==item.mealId" class="meal-item-food">
          <p v-for="(item2,index2) in item.foodItems" :key="index2"><span>{{
              item2.foodName
            }}:</span>{{ item2.quantity }}</p>
        </el-card>
      </div>
    </div>
    <!--餐食列表 end-->
  </div>
</template>

<script setup>
import {useDataStore} from "@/stores/dataStore.js";
import {useRoute, useRouter} from 'vue-router'
import TopNav from "@/components/TopNav/Back.vue"
import mealAxios from "@/api/meal.js"
import {onMounted, reactive, ref} from "vue";

const route = useRoute()
//route.params.name;
const router = useRouter()
const dataStore = useDataStore()
//当前查看的食物
const currentMeal = ref(0)
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  mealImg: "",
  mealName: "",
  mealDesc: "",
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  mealId: '',
  mealImg: "",
  mealName: "",
  mealDesc: "",
})
/**
 * 网路请求：分页查询
 *  */
const http = () => {
  mealAxios.meal_search({
    search: searchInfo.value,
    page: currentPage.value,
    size: defaultPageSize.value
  }).then(res => {
    if (res.data.code == 200) {
      console.log(res.data.data.records)
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
onMounted(() => {
  http()
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  currentPage.value = nowPage
  http()
}
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http()
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 上传成功的钩子
 */
const onHeadImageAddSuccess = (response, uploadFile) => {
  addFormInfo.mealImg = response.data
  ElMessage.success("上传成功")
}
/**
 * 移除图片的钩子
 */
const onHeadImageAddRemove = (response, uploadFile) => {
  sysAxios.fastdfs_delete({
    filePath: addFormInfo.mealImg
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("移除成功")
    }
  })
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  mealAxios.meal_add({
    mealImg: addFormInfo.mealImg,
    mealName: addFormInfo.mealName,
    mealDesc: addFormInfo.mealDesc,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http()
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {

  dialogEditorVisible.value = true
  mealAxios.meal_findById({
    mealId: row.mealId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.mealId = res.data.data.mealId;
      editorFormInfo.mealImg = res.data.data.mealImg;
      editorFormInfo.mealName = res.data.data.mealName;
      editorFormInfo.mealDesc = res.data.data.mealDesc;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 封面上传成功的钩子
 */
const onHeadImageEditSuccess = (response, uploadFile) => {
  //删除以前图片
  sysAxios.fastdfs_delete({
    filePath: editorFormInfo.mealImg
  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("fastdfs移除原图片成功")
    }
  })
  //替换为现在的图片
  editorFormInfo.mealImg = response.data
  ElMessage.success("上传成功")

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  mealAxios.meal_update({
    mealId: editorFormInfo.mealId,
    mealImg: editorFormInfo.mealImg,
    mealName: editorFormInfo.mealName,
    mealDesc: editorFormInfo.mealDesc,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http()
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    mealAxios.meal_delete({
      mealId: row.mealId
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        http()
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })
}
</script>

<style scoped lang="scss">

.meal-list {
  .meal-item {
    .meal-item-meal {
      height: 100px;
      border-radius: 10px;
      background-color: #ffffff;
      margin: 10px;
      display: flex;

      .left {
        img {
          border-radius: 10px;
          width: 100px;
          height: 100px;
        }
      }

      .right {
        margin-left: 10px;

        .title {
          margin-top: 10px;
          font-size: 14px;
          font-weight: bolder;
          font-family: 楷体;
        }

        .desc {
          margin-top: 10px;
          font-size: 10px;
          opacity: .6;
          height: 80px;
          overflow: hidden;
        }
      }
    }

    .meal-item-food {
      p {
        font-family: 楷体;
        margin-top: 2px;
        opacity: .8;

        span {
          margin-right: 4px;
          font-weight: bolder;
        }
      }
    }
  }
}
</style>
